<!-- 首页， tabbar第二页 -->
<template>
  <view class="container">
    <!-- 轮播图 -->
    <view class="swiper-box">
      <u-swiper :list="swiperImgList" indicator indicatorMode="line" circular radius="8" height="170" bgColor="#05C160">
      </u-swiper>
    </view>
    <!-- 打印模块 -->
    <view class="print-box">
      <!-- 左图 -->
      <view class="left-image">
        <img src="http://1.116.226.250/source/image/file.png" alt="scaleToFill">
      </view>
      <!-- 右文字 + 按钮 -->
      <view class="right-box">
        <view class="top-text">
          <text>资料文档打印</text>
        </view>
        <view class="mid-text">
          <text>支持Word/PDF/PPT/图片等文件打印</text>
          <text>上传文件 - 设置参数 - 24小时发货</text>
        </view>
        <view class="bottom-button">
          <u-button type="primary" text="立即开始打印" size="small" color="#05C160" shape="circle" @click="goToPrint"></u-button>
        </view>
      </view>
    </view>
    
    <!-- 消息滚动 -->
    <view class="notice-bar-box">
      <u-notice-bar :text="noticeBarText"></u-notice-bar>
    </view>

    <!-- 右下角固定客服按钮 -->
    <view class="fixed-btn">
      <img src="http://1.116.226.250/source/image/call.png" alt="scaleToFill" @click="toCallPage()">
    </view>

    <!-- 底部模块 -->
    <view class="bottom-img">
      <view class="bottom-item" v-for="(item, index) in bottomIconList" :key="index">
        <image :src="item.iconPath" mode="aspectFit"></image>
      </view>
    </view>
    
    <view class="bottom-text">
      <text>资料文档一键上传 | 自动计价 | 用完即删</text>
    </view>
  </view>
</template>

<script>
  import { mapMutations } from 'vuex'
  export default {
    data() {
      return {
        // 轮播图数据
        swiperImgList: [
          'http://1.116.226.250/source/swiper_img/swiper1.png',
          'http://1.116.226.250/source/swiper_img/swiper2.png',
        ],
        // 底部图标数据
        bottomIconList: [{
            iconPath: 'http://1.116.226.250/source/list_icon/pdf.png'
          },
          {
            iconPath: 'http://1.116.226.250/source/list_icon/word.png'
          },
          {
            iconPath: 'http://1.116.226.250/source/list_icon/ppt.png'
          },
          {
            iconPath: 'http://1.116.226.250/source/list_icon/wx.png'
          },
          {
            iconPath: 'http://1.116.226.250/source/list_icon/file.png'
          },
          {
            iconPath: 'http://1.116.226.250/source/list_icon/baidu.png'
          }
        ],
        noticeBarText: "印客打印系统在线接单中，客服9:00 - 24:00在线",
      }
    },
    methods: {
      // 客服按钮
      toCallPage() {
        uni.navigateTo({
          url: '/components/call/call'
        })
      },
      ...mapMutations('common', ['goToPrint'])
    }
  }
</script>

<style lang="scss">
  .container {
    width: 100%;

    .swiper-box {
      width: 720rpx;
      margin: 0 auto;
      margin-top: 20rpx;
    }

    .print-box {
      width: 720rpx;
      height: 320rpx;
      background-color: #fff;
      margin: 0 auto;
      margin-top: 20rpx;
      border-radius: 40rpx;
      display: flex;

      .left-image {
        width: 260rpx;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;


        img {
          width: 160rpx;
          height: 160rpx;
          margin: 0 auto;
        }
      }

      .right-box {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: left;
        flex-direction: column;
        justify-content: center;

        .top-text {
          color: #000;
          font-size: 40rpx;
          margin-left: 40rpx;
        }

        .mid-text {
          font-size: 28rpx;
          margin-left: 40rpx;
          color: #aaa;
          margin-top: 10rpx;
        }

        .bottom-button {
          margin-top: 40rpx;
          margin-left: 40rpx;
          width: 240rpx;
        }
      }
    }

    .notice-bar-box {
      width: 90%;
      margin: 0 auto;
      margin-top: 20rpx;
      border-radius: 10px;
    }

    .fixed-btn {
      position: fixed;
      bottom: 100rpx;
      right: 20rpx;
      width: 100rpx;
      height: 100rpx;
      border-radius: 50rpx;
      background-color: #05C160;
      display: flex;
      justify-content: center;

      img {
        width: 72rpx;
        height: 72rpx;
        margin: auto 0;
      }
    }

    .bottom-img {
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin-top: 60rpx;

      .bottom-item {
        width: 80rpx;
        height: 80rpx;
        margin-left: 18rpx;
        background-color: #fff;
        border-radius: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 52rpx;
          height: 52rpx;
        }
      }
    }
    
    .bottom-text {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 24rpx;
      
      text {
        font-size: 28rpx;
        color: #aaa;
      }
    }
  }
</style>
